<template>
	<view style="width: 100%; height:808rpx;">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	// 或者按需引入 
	import * as echarts from 'echarts';
	import {
		LineChart,
		BarChart,
		CandlestickChart
	} from 'echarts/charts';
	import {
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		LegendComponent,
		// ToolboxComponent,
		BrushComponent,
		VisualMapComponent,
		DataZoomComponent,
		MarkLineComponent
	} from 'echarts/components';
	// 标签自动布局，全局过渡动画等特性
	import {
		LabelLayout,
		UniversalTransition
	} from 'echarts/features';
	// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
	import {
		CanvasRenderer
	} from 'echarts/renderers';

	// 注册必须的组件
	echarts.use([
		LegendComponent,
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		// ToolboxComponent,
		BrushComponent,
		VisualMapComponent,
		DataZoomComponent,
		MarkLineComponent,
		LineChart,
		BarChart,
		CandlestickChart,
		LabelLayout,
		UniversalTransition,
		CanvasRenderer,
	]);
	const upColor = '#0bb563';
	const downColor = '#f33b50';
	//-------------------------------------
	export default {
		props: {
			kData: {
				type: Array,
				default: () => []
			},
			nowprice: {
				type: Number,
				default: 0
			},
			currColor:{
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		watch: {
		  nowprice: {
		    handler(newVal) {
		      this.updateChart();
		    },
		    // deep: true // 深度监听
		  },
		  currColor: {
		    handler(newVal) {
		      this.updateChart();
		    },
		    // deep: true // 深度监听
		  },
		},
		mounted() {
			this.initCharts();
		},
		methods: {
			splitData(rawData) {
				let clonedData = JSON.parse(JSON.stringify(rawData)); // 深拷贝
				let categoryData = [];
				let values = [];
				let volumes = [];
				for (let i = 0; i < clonedData.length; i++) {
					categoryData.push(clonedData[i].splice(0, 1)[0]);
					values.push(clonedData[i]);
					volumes.push([i, clonedData[i][4], clonedData[i][0] > clonedData[i][1] ? 1 : -1]);
				}
				return {
					categoryData: categoryData,
					values: values,
					volumes: volumes
				};
			},
			calculateMA(dayCount, data) {
				var result = [];
				for (var i = 0, len = data.values.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data.values[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(3));
				}
				return result;
			},
			initKOption(kData,currPrice){
				let data = this.splitData(kData);
				return {
					legend: {
						padding: 0,
						top: -20
					},
					tooltip: {
						trigger: "item",
						showDelay: false,
						enterable: true,
						axisPointer: {
							type: "cross"
						},
						position: function(t, e, a, n, i) {
							return [0, 0]
						},
						extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
					},
					axisPointer: {
						link: [{
							xAxisIndex: 'all'
						}],
						label: {
							backgroundColor: '#777'
						}
					},
					brush: {
						xAxisIndex: 'all',
						brushLink: 'all',
						outOfBrush: {
						  colorAlpha: 0.1
						}
					  },
					  visualMap: {
						show: false,
						seriesIndex: 5,
						dimension: 2,
						pieces: [
						  {
							value: 1,
							color: downColor
						  },
						  {
							value: -1,
							color: upColor
						  }
						]
					},
					grid: [{
							left: '10%',
							right: '8%',
							height: '50%'
						},
						{
							left: '10%',
							right: '8%',
							top: '70%',
							height: '16%'
						}
					],
					xAxis: [{
							type: 'category',
							data: data.categoryData,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							splitLine: {
								show: true
							},
							min: 'dataMin',
							max: 'dataMax',
							axisPointer: {
								z: 100
							}
						},
						{
							type: 'category',
							gridIndex: 1,
							data: data.categoryData,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							min: 'dataMin',
							max: 'dataMax'
						}
					],
					yAxis: [{
							scale: true,
							splitNumber: 2,
							position: "right",
							axisLine: {
								lineStyle: {
									color: "#777"
								}
							},
							splitLine: {
								show: true
							},
							axisTick: {
								show: true
							},
							offset:-5,
						},
						{
							scale: true,
							gridIndex: 1,
							splitNumber: 2,
							axisLabel: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							}
						}
					],
					dataZoom: [{
							type: 'inside',
							xAxisIndex: [0, 1],
							start: 1,
							end: 100
						},
						{
							show: true,
							xAxisIndex: [0, 1],
							type: 'slider',
							top: 0,
							start: 1,
							end: 100,
							height: 14,
							handleIcon: "path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
							handleSize: "100%"
						}
					],
					series: [{
							// name: 'Dow-Jones index',
							type: 'candlestick',
							data: data.values,
							itemStyle: {
								color: upColor,
								color0: downColor,
								borderColor: upColor,
								borderColor0: downColor
							},
							// barWidth: 10, // 增加蜡烛宽度
							markLine: {
								animation: false, // 禁用动画效果
								symbol: ['none', 'none'], // 不显示标线端点的箭头
								data: [ 
									{
										// name: 'Y 轴值为 100 的水平线',
										yAxis: currPrice,
										label: {
											show: true,
											formatter: function(t) {
												var e = t.value;
												return e
											},
											position: "insideEndTop",
											padding: [6, 8],
											backgroundColor: this.currColor,
											color: "#fff",
											borderRadius: 4
										},
										lineStyle: {
											color: this.currColor,
											type: "dashed"
										}
									},
								],
							},
						},
						{
							name: 'Volume',
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: data.volumes,
							itemStyle: {
								color: function (params) {
								  var colorList;
								  if (params.data[2] == -1) {
								    colorList = upColor;
								  } else {
								    colorList = downColor;
								  }
								  return colorList;
								},
							}
						}
					]
				}
			},
			initCharts() {
				// 把 echarts 传入
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.initKOption(this.kData,this.nowprice));
				});
			},
			// updateData() {
			//   // 监听数据变化并动态更新图表
			//   const chart = this.$refs.chart.echart; // 获取 ECharts 实例
			//   if (chart) {
			// 	this.chartOptions.series[0].data = this.newData; // 更新数据
			// 	chart.setOption(this.chartOptions, true); // 更新图表，`true` 表示合并更新
			//   }
			// },
			updateChart(){
				// console.log('currColor',this.currColor);
				this.$refs.chart.setOption(this.initKOption(this.kData,this.nowprice),true);
				// this.$refs.chart.setChart(chart => {
				// 	chart.setOption(this.initKOption(this.kData,this.nowprice),true);
				// });
			}
		}
	}
</script>

<style>
</style>